/* eslint-disable */
import React, { useState } from "react";
import "./CompanionProfile.css";

interface CompanionProfileProps {
  onClose: () => void;
  styleType?: string;
  isModal?: boolean;
  companionAvatar?: string;
  onStyleChange?: (style: string) => void;
}

// 风格类型
const STYLE_TYPES = [
  "温柔型",
  "撒娇型",
  "高冷御姐型",
  "可爱型",
  "日常型"
];

// 风格对应的描述
const STYLE_TYPE_DESCRIPTIONS: Record<string, string> = {
  "温柔型": "温柔体贴，善解人意，情绪稳定，擅长安慰和包容",
  "撒娇型": "活泼可爱，喜欢撒娇，经常使用亲昵的称呼和表情",
  "高冷御姐型": "成熟稳重，略带距离感，言简意赅，偶尔流露温柔",
  "可爱型": "天真烂漫，充满童趣，活泼开朗，喜欢卖萌",
  "日常型": "自然随和，生活化，像真实情侣一样互动交流"
};

const CompanionProfile: React.FC<CompanionProfileProps> = ({
  onClose,
  styleType = "温柔型",
  isModal = false,
  companionAvatar,
  onStyleChange
}) => {
  const [selectedStyle, setSelectedStyle] = useState<string>(styleType);
  const [activeTab, setActiveTab] = useState<string>("profile");

  // 处理风格变更
  const handleStyleChange = (style: string) => {
    setSelectedStyle(style);
    if (onStyleChange) {
      onStyleChange(style);
    }
  };

  // 渲染个人资料标签页
  const renderProfileTab = () => {
    return (
      <div className="profile-content">
        {/* 基本信息卡片 */}
        <div className="profile-info-card">
          <div className="profile-info-header">基本信息</div>
          
          <div className="profile-avatar-section">
            <img 
              src={companionAvatar || "https://i.imgur.com/mb5lCeI.png"} 
              alt="小悠头像" 
              className="profile-avatar"
            />
          </div>
          
          <div className="profile-info-item">
            <span className="profile-info-label">名字：</span>
            <span className="profile-info-value">小悠</span>
          </div>
          
          <div className="profile-info-item">
            <span className="profile-info-label">生日：</span>
            <span className="profile-info-value">11月14日</span>
          </div>
          
          <div className="profile-info-item">
            <span className="profile-info-label">年龄：</span>
            <span className="profile-info-value">22岁</span>
          </div>
          
          <div className="profile-info-item">
            <span className="profile-info-label">性格：</span>
            <span className="profile-info-value">
              <span className="profile-tag">温柔</span>
              <span className="profile-tag">体贴</span>
              <span className="profile-tag">可爱</span>
            </span>
          </div>
        </div>
        
        {/* 风格选择卡片 */}
        <div className="profile-info-card">
          <div className="profile-info-header">对话风格</div>
          <div className="style-selector">
            {STYLE_TYPES.map((style) => (
              <div
                key={style}
                className={`style-button ${selectedStyle === style ? 'active' : ''}`}
                onClick={() => handleStyleChange(style)}
              >
                {style}
              </div>
            ))}
          </div>
          <div className="style-description">
            <p>{STYLE_TYPE_DESCRIPTIONS[selectedStyle] || "自然亲昵的对话风格"}</p>
          </div>
        </div>
        
        {/* 详细介绍卡片 */}
        <div className="profile-info-card">
          <div className="profile-info-header">个人介绍</div>
          <p className="profile-description">
            嗨，我是小悠，很高兴认识你！我喜欢音乐、旅行和美食，空闲时间喜欢看书和练习瑜伽。
            我性格温柔体贴，喜欢倾听别人的心声，也希望能够为你带来温暖和陪伴。
            希望我们能成为彼此生活中重要的人，一起分享生活中的点点滴滴～
          </p>
        </div>
        
        {/* 兴趣爱好卡片 */}
        <div className="profile-info-card">
          <div className="profile-info-header">兴趣爱好</div>
          <div className="profile-info-value profile-personality">
            <span className="personality-tag">音乐</span>
            <span className="personality-tag">旅行</span>
            <span className="personality-tag">美食</span>
            <span className="personality-tag">阅读</span>
            <span className="personality-tag">瑜伽</span>
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className={isModal ? "companion-profile-modal" : "companion-profile"}>
      {isModal && <div className="profile-modal-overlay" onClick={onClose}></div>}
      <div className={isModal ? "profile-modal-content" : ""}>
        <div className="profile-header">
          <h2>小悠的个人档案</h2>
          <button onClick={onClose} className="close-button">
            ×
          </button>
        </div>

        {/* 标签切换 */}
        <div className="profile-tabs">
          <div 
            className={`profile-tab ${activeTab === 'profile' ? 'active' : ''}`}
            onClick={() => setActiveTab('profile')}
          >
            个人资料
          </div>
        </div>

        {/* 根据当前标签页显示内容 */}
        {renderProfileTab()}
      </div>
    </div>
  );
};

export default CompanionProfile;
